<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋在线对战 - 个人中心</title>
    <link rel="stylesheet" href="common.css">
    <style>
        body {
            background: #f8f9fa;
            margin: 0;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
        }
        
        .header {
            background: #2c3e50;
            color: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .header h1 {
            font-size: 18px;
            font-weight: bold;
        }
        
        .header-actions {
            display: flex;
            gap: 10px;
        }
        
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
        }
        
        .btn-primary {
            background: #3498db;
            color: white;
        }
        
        .btn-danger {
            background: #e74c3c;
            color: white;
        }
        
        .main-container {
            display: flex;
            padding: 20px;
            gap: 20px;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .left-panel {
            width: 300px;
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            height: fit-content;
        }
        
        .user-avatar-large {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: #3498db;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 48px;
            font-weight: bold;
            margin: 0 auto 20px;
        }
        
        .user-name-section {
            text-align: center;
            margin-bottom: 20px;
        }
        
        .user-name {
            font-size: 20px;
            font-weight: bold;
            color: #2c3e50;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        
        .edit-icon {
            cursor: pointer;
            color: #3498db;
            font-size: 16px;
        }
        
        .user-info-item {
            padding: 10px 0;
            border-bottom: 1px solid #ecf0f1;
            font-size: 14px;
        }
        
        .info-label {
            color: #7f8c8d;
            margin-right: 10px;
        }
        
        .info-value {
            color: #2c3e50;
            font-weight: 500;
        }
        
        .center-panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .card-title {
            font-size: 18px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 20px;
        }
        
        .win-rate-card {
            text-align: center;
        }
        
        .win-rate-value {
            font-size: 48px;
            font-weight: bold;
            color: #27ae60;
            margin: 20px 0;
        }
        
        .win-rate-bar {
            width: 100%;
            height: 30px;
            background: #ecf0f1;
            border-radius: 15px;
            overflow: hidden;
            margin: 20px 0;
        }
        
        .win-rate-fill {
            height: 100%;
            background: linear-gradient(90deg, #27ae60, #2ecc71);
            transition: width 0.5s ease;
        }
        
        .chart-container {
            height: 300px;
            position: relative;
        }
        
        .chart-placeholder {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #7f8c8d;
            font-size: 14px;
        }
        
        .time-range-selector {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .time-range-btn {
            padding: 8px 16px;
            border: 1px solid #ddd;
            background: white;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
        }
        
        .time-range-btn.active {
            background: #3498db;
            color: white;
            border-color: #3498db;
        }
        
        .history-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .history-table th,
        .history-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ecf0f1;
        }
        
        .history-table th {
            background: #f8f9fa;
            font-weight: bold;
            color: #2c3e50;
        }
        
        .result-win {
            color: #27ae60;
            font-weight: bold;
        }
        
        .result-lose {
            color: #e74c3c;
            font-weight: bold;
        }
        
        .result-draw {
            color: #95a5a6;
            font-weight: bold;
        }
        
        .right-panel {
            width: 300px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .opponent-item {
            padding: 12px;
            border-bottom: 1px solid #ecf0f1;
        }
        
        .opponent-name {
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 5px;
        }
        
        .opponent-stats {
            font-size: 12px;
            color: #7f8c8d;
        }
        
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .modal.show {
            display: flex;
        }
        
        .modal-content {
            background: white;
            border-radius: 12px;
            padding: 30px;
            max-width: 400px;
            width: 90%;
        }
        
        .modal-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #2c3e50;
        }
        
        .modal-input {
            width: 100%;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            margin-bottom: 10px;
        }
        
        .modal-input:focus {
            outline: none;
            border-color: #3498db;
        }
        
        .char-count {
            font-size: 12px;
            color: #7f8c8d;
            text-align: right;
            margin-bottom: 15px;
        }
        
        .modal-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }
        
        .btn-success {
            background: #27ae60;
            color: white;
        }
        
        .btn-gray {
            background: #95a5a6;
            color: white;
        }
        
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            margin-top: 20px;
        }
        
        @media (max-width: 1024px) {
            .main-container {
                flex-direction: column;
            }
            
            .left-panel, .right-panel {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>五子棋在线对战 - 个人中心</h1>
        <div class="header-actions">
            <button class="btn btn-primary" onclick="backToLobby()">返回大厅</button>
            <button class="btn btn-danger" onclick="logout()">退出登录</button>
        </div>
    </div>
    
    <div class="main-container">
        <div class="left-panel">
            <div class="user-avatar-large">U</div>
            <div class="user-name-section">
                <div class="user-name">
                    <span id="userName">玩家001</span>
                    <span class="edit-icon" onclick="showEditNicknameModal()">✏️</span>
                </div>
            </div>
            <div class="user-info-item">
                <span class="info-label">账号:</span>
                <span class="info-value">user001</span>
            </div>
            <div class="user-info-item">
                <span class="info-label">注册时间:</span>
                <span class="info-value">2024-01-01</span>
            </div>
            <div class="user-info-item">
                <span class="info-label">当前积分:</span>
                <span class="info-value">150</span>
            </div>
            <div class="user-info-item">
                <span class="info-label">总场次:</span>
                <span class="info-value">25</span>
            </div>
            <div class="user-info-item">
                <span class="info-label">胜场:</span>
                <span class="info-value">18</span>
            </div>
            <div class="user-info-item">
                <span class="info-label">负场:</span>
                <span class="info-value">5</span>
            </div>
            <div class="user-info-item">
                <span class="info-label">平局:</span>
                <span class="info-value">2</span>
            </div>
        </div>
        
        <div class="center-panel">
            <div class="card win-rate-card">
                <div class="card-title">胜率统计</div>
                <div class="win-rate-value" id="winRate">72.0%</div>
                <div class="win-rate-bar">
                    <div class="win-rate-fill" id="winRateBar" style="width: 72%;"></div>
                </div>
                <div style="font-size: 12px; color: #7f8c8d;">与上期相比: <span style="color: #27ae60;">↑ 2.5%</span></div>
            </div>
            
            <div class="card">
                <div class="card-title">积分趋势图</div>
                <div class="time-range-selector">
                    <button class="time-range-btn active" onclick="changeTimeRange('7d')">最近7天</button>
                    <button class="time-range-btn" onclick="changeTimeRange('30d')">最近30天</button>
                    <button class="time-range-btn" onclick="changeTimeRange('all')">全部</button>
                </div>
                <div class="chart-container">
                    <div class="chart-placeholder">
                        <canvas id="scoreChart" width="600" height="300"></canvas>
                    </div>
                </div>
            </div>
            
            <div class="card">
                <div class="card-title">历史战绩</div>
                <table class="history-table">
                    <thead>
                        <tr>
                            <th>时间</th>
                            <th>对手</th>
                            <th>结果</th>
                            <th>积分变化</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="historyTableBody">
                        <!-- 历史记录将通过JavaScript动态生成 -->
                    </tbody>
                </table>
                <div class="pagination">
                    <button class="btn btn-primary" onclick="changePage(-1)">上一页</button>
                    <span id="pageInfo">第 1 页，共 3 页</span>
                    <button class="btn btn-primary" onclick="changePage(1)">下一页</button>
                </div>
            </div>
        </div>
        
        <div class="right-panel">
            <div class="card">
                <div class="card-title">常见对手</div>
                <div id="opponentList">
                    <!-- 对手列表将通过JavaScript动态生成 -->
                </div>
            </div>
        </div>
    </div>
    
    <!-- 昵称修改弹窗 -->
    <div id="editNicknameModal" class="modal">
        <div class="modal-content">
            <div class="modal-title">修改昵称</div>
            <input type="text" id="nicknameInput" class="modal-input" placeholder="请输入游戏昵称（2-20个字符）" maxlength="20">
            <div class="char-count">
                <span id="charCount">0</span>/20
            </div>
            <div id="nicknameValidation" style="font-size: 12px; color: #e74c3c; margin-bottom: 15px;"></div>
            <div class="modal-actions">
                <button class="btn btn-gray" onclick="closeEditNicknameModal()">取消</button>
                <button class="btn btn-success" onclick="saveNickname()">确认</button>
            </div>
        </div>
    </div>

    <script>
        // 模拟数据
        const historyData = [
            { time: '2024-01-15 14:30', opponent: '玩家002', result: '胜', score: '+5' },
            { time: '2024-01-15 13:45', opponent: '玩家003', result: '负', score: '-3' },
            { time: '2024-01-15 12:20', opponent: '玩家004', result: '胜', score: '+5' },
            { time: '2024-01-15 11:10', opponent: '玩家005', result: '胜', score: '+5' },
            { time: '2024-01-15 10:30', opponent: '玩家006', result: '负', score: '-3' },
            { time: '2024-01-14 16:45', opponent: '玩家007', result: '胜', score: '+5' },
            { time: '2024-01-14 15:20', opponent: '玩家008', result: '胜', score: '+5' },
            { time: '2024-01-14 14:15', opponent: '玩家009', result: '负', score: '-3' },
        ];
        
        const opponentData = [
            { name: '玩家002', count: 5, winRate: '80%', lastTime: '2024-01-15' },
            { name: '玩家003', count: 3, winRate: '33%', lastTime: '2024-01-15' },
            { name: '玩家004', count: 2, winRate: '100%', lastTime: '2024-01-15' },
        ];
        
        let currentPage = 1;
        const recordsPerPage = 5;
        
        // 初始化页面
        function initPage() {
            loadHistoryData();
            loadOpponentList();
            initChart();
            
            // 昵称输入框事件
            document.getElementById('nicknameInput').addEventListener('input', function() {
                const value = this.value;
                document.getElementById('charCount').textContent = value.length;
                validateNickname(value);
            });
        }
        
        function loadHistoryData() {
            const tbody = document.getElementById('historyTableBody');
            const startIndex = (currentPage - 1) * recordsPerPage;
            const endIndex = startIndex + recordsPerPage;
            const pageData = historyData.slice(startIndex, endIndex);
            
            tbody.innerHTML = '';
            pageData.forEach(item => {
                const row = document.createElement('tr');
                const resultClass = item.result === '胜' ? 'result-win' : 
                                   item.result === '负' ? 'result-lose' : 'result-draw';
                const scoreClass = item.score.startsWith('+') ? 'result-win' : 
                                  item.score.startsWith('-') ? 'result-lose' : 'result-draw';
                
                row.innerHTML = `
                    <td>${item.time}</td>
                    <td>${item.opponent}</td>
                    <td class="${resultClass}">${item.result}</td>
                    <td class="${scoreClass}">${item.score}</td>
                    <td><button class="btn btn-primary" style="font-size: 12px; padding: 4px 8px;">查看详情</button></td>
                `;
                tbody.appendChild(row);
            });
            
            const totalPages = Math.ceil(historyData.length / recordsPerPage);
            document.getElementById('pageInfo').textContent = `第 ${currentPage} 页，共 ${totalPages} 页`;
        }
        
        function loadOpponentList() {
            const list = document.getElementById('opponentList');
            list.innerHTML = '';
            opponentData.forEach(opponent => {
                const item = document.createElement('div');
                item.className = 'opponent-item';
                item.innerHTML = `
                    <div class="opponent-name">${opponent.name}</div>
                    <div class="opponent-stats">
                        对局${opponent.count}次 | 胜率${opponent.winRate} | 最近: ${opponent.lastTime}
                    </div>
                `;
                list.appendChild(item);
            });
        }
        
        function initChart() {
            const canvas = document.getElementById('scoreChart');
            const ctx = canvas.getContext('2d');
            
            // 简单的折线图绘制
            ctx.strokeStyle = '#3498db';
            ctx.lineWidth = 2;
            ctx.beginPath();
            const data = [140, 145, 150, 148, 150, 152, 150];
            const width = canvas.width;
            const height = canvas.height;
            const padding = 40;
            const chartWidth = width - padding * 2;
            const chartHeight = height - padding * 2;
            const minValue = Math.min(...data);
            const maxValue = Math.max(...data);
            const range = maxValue - minValue || 1;
            
            data.forEach((value, index) => {
                const x = padding + (index / (data.length - 1)) * chartWidth;
                const y = padding + chartHeight - ((value - minValue) / range) * chartHeight;
                if (index === 0) {
                    ctx.moveTo(x, y);
                } else {
                    ctx.lineTo(x, y);
                }
            });
            ctx.stroke();
        }
        
        function changeTimeRange(range) {
            document.querySelectorAll('.time-range-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.classList.add('active');
            // 重新加载图表数据
            initChart();
        }
        
        function changePage(direction) {
            const newPage = currentPage + direction;
            const totalPages = Math.ceil(historyData.length / recordsPerPage);
            if (newPage >= 1 && newPage <= totalPages) {
                currentPage = newPage;
                loadHistoryData();
            }
        }
        
        function showEditNicknameModal() {
            const modal = document.getElementById('editNicknameModal');
            const input = document.getElementById('nicknameInput');
            input.value = document.getElementById('userName').textContent;
            document.getElementById('charCount').textContent = input.value.length;
            modal.classList.add('show');
        }
        
        function closeEditNicknameModal() {
            document.getElementById('editNicknameModal').classList.remove('show');
            document.getElementById('nicknameValidation').textContent = '';
        }
        
        function validateNickname(nickname) {
            const validation = document.getElementById('nicknameValidation');
            if (nickname.length < 2) {
                validation.textContent = '昵称至少需要2个字符';
                return false;
            }
            if (nickname.length > 20) {
                validation.textContent = '昵称不能超过20个字符';
                return false;
            }
            if (!/^[\u4e00-\u9fa5a-zA-Z0-9_]+$/.test(nickname)) {
                validation.textContent = '昵称只能包含中文、字母、数字和下划线';
                return false;
            }
            validation.textContent = '';
            return true;
        }
        
        function saveNickname() {
            const nickname = document.getElementById('nicknameInput').value;
            if (!validateNickname(nickname)) {
                return;
            }
            
            // 模拟保存
            document.getElementById('userName').textContent = nickname;
            closeEditNicknameModal();
            alert('昵称修改成功！');
        }
        
        function backToLobby() {
            window.location.href = 'lobby.html';
        }
        
        function logout() {
            if (confirm('确定要退出登录吗？')) {
                window.location.href = 'login.html';
            }
        }
        
        // 点击遮罩层关闭弹窗
        document.getElementById('editNicknameModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeEditNicknameModal();
            }
        });
        
        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', initPage);
    </script>
</body>
</html>

